<template>
  <div class="image-component-container relative w-full h-full flex items-center justify-center">
    <img 
      :src="component.src || placeholderImage" 
      :alt="component.alt || '图片'"
      :style="imageStyles"
      class="image-content"
      @error="handleImageError"
    >
    
    <!-- 加载失败提示 -->
    <div v-if="imageError" class="error-message absolute text-center text-red-500">
      <el-icon class="mr-1"><PictureFilled /></el-icon>
      图片加载失败
    </div>
  </div>
</template>

<script>
import { defineProps, ref, computed } from 'vue';
import { PictureFilled } from '@element-plus/icons-vue';

export default {
  name: 'ImageComponent',
  props: {
    component: {
      type: Object,
      required: true,
      description: '图片组件配置'
    },
    isPreview: {
      type: Boolean,
      default: false,
      description: '是否预览模式'
    }
  },
  setup(props) {
    const imageError = ref(false);
    const placeholderImage = '';
    
    // 图片样式
    const imageStyles = computed(() => ({
      maxWidth: '100%',
      maxHeight: '100%',
      width: props.component.fit === 'fill' ? '100%' : 'auto',
      height: props.component.fit === 'fill' ? '100%' : 'auto',
      objectFit: props.component.fit || 'contain',
      borderRadius: props.component.borderRadius ? `${props.component.borderRadius}px` : '0',
      border: props.component.borderWidth ? `${props.component.borderWidth}px solid ${props.component.borderColor || '#000'}` : 'none',
      boxShadow: props.component.boxShadow || 'none'
    }));
    
    // 处理图片加载错误
    const handleImageError = () => {
      imageError.value = true;
      // 3秒后隐藏错误提示
      setTimeout(() => {
        imageError.value = false;
      }, 3000);
    };
    
    return {
      imageError,
      placeholderImage,
      imageStyles,
      handleImageError,
      PictureFilled
    };
  }
};
</script>

<style scoped>
.image-component-container {
  overflow: hidden;
}

.error-message {
  color: #f56c6c;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
}
</style>
    